<!-- 管理员登录界面 -->
<template>
  <el-dialog
    title="管理员登入"
    v-model="dialogVisible"
    width="500px"
    align-center
    @close="resetForm"
  >
    <el-card class="login-card">
      <el-form :model="loginDate" ref="formRef" :rules="rules" label-width="110px" @submit.prevent="login">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginDate.username" placeholder="请输入用户名"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="loginDate.password" placeholder="请输入密码"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="login">登入</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton, ElCard, ElDialog } from 'element-plus';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

const router = useRouter();
// 表单数据模型
const loginDate = ref({
  username: '',
  password: '',
});

// 获取表单的引用
const formRef = ref(null);

// 表单验证规则
const rules = ref({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
});

// 控制对话框的显示
const dialogVisible = ref(false);

// 重置表单
const resetForm = () => {
  formRef.value.resetFields();
};

// 导入后端接口
import { adminLogin, getadmin } from '@/api/admin.js';
import userInfoStore from '@/stores/userInfo.js';
const userStore = userInfoStore();
import useTokenStore from '@/stores/token.js';
const tokenStore = useTokenStore();
// 提交表单
const login = async () => {
  let result = await adminLogin(loginDate.value);
  if (result.code === 200) {
    ElMessage.success("登入成功");
    tokenStore.setToken(result.data)
    let info = await getadmin(loginDate.value.username);
    userStore.setInfo(info.data);
    dialogVisible.value = false; // 登录成功后关闭弹窗
    router.push({ path: 'admin' });
  } else {
    ElMessage.error("登入失败");
  }
};
</script>

<style scoped>
/* 背景图片样式 */
.el-dialog {
  background: url('https://c-ssl.dtstatic.com/uploads/blog/202106/30/20210630093059_62b25.thumb.1000_0.gif') center/cover no-repeat;
  backdrop-filter: blur(10px);
  border-radius: 0.5rem;
  padding: 0;
  z-index: 9999;
}

.el-card {
  background: rgba(255, 255, 255, 0.7);
  padding: 1.25rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
  border-radius: 0.5rem;
}

/* 输入框样式 */
.el-input {
  border-radius: 0.25rem;
}

.el-button {
  margin-top: 0.625rem;
  border-radius: 0.25rem;
  transition: all 0.2s ease;
}

/* 按钮颜色 */
.el-button[type="primary"] {
  background-color: #409EFF;
  color: white;
}

.el-button[type="primary"]:hover {
  background-color: #337ab7;
  transform: translateY(-1px);
}

.el-button[type="default"] {
  background-color: #f2f6fc;
  color: #409EFF;
}

.el-button[type="default"]:hover {
  background-color: #e6e6e6;
  transform: translateY(-1px);
}

/* 表单项间距 */
.el-form-item {
  margin-bottom: 0.9375rem;
}

/* 自定义标题和边框 */
.el-dialog__header {
  background-color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid #e4e7ed;
}
</style>

